<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text">
 
    </style>
    <style>
        td{border-bottom: springgreen 2px solid;}
        th{border-bottom: springgreen 2px solid;}
    </style>
</head>
<body>
    <table>
        <tr>
            <th><input type="checkbox" class="choose-all-input" onclick="clickChooseAllInput()" /></th>
            <th>日期</th>
            <th>姓名</th>
            <th>地址</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>2022-3-18</td>
            <td>张三</td>
            <td>郑州市</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>2022-3-18</td>
            <td>张三</td>
            <td>郑州市</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>2022-3-18</td>
            <td>张三</td>
            <td>郑州市</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="choose-single" /></td>
            <td>2022-3-18</td>
            <td>张三</td>
            <td>郑州市</td>
        </tr>
    </table>
    <button onclick="clickChooseAllBtn()">全选</button>
    <button onclick="clickChooseReverse()">反选</button>
</body>
<script type="text/javascript">
    var chooseAllInputEle = document.getElementsByClassName("choose-all-input")[0];
    var chooseSingleEles = document.getElementsByClassName("choose-single");
    function clickChooseAllInput() {
        if (chooseAllInputEle.checked) {
            choose("selected");
        } else {
            choose("");
        }
    }
    function clickChooseAllBtn() {
        chooseAllInputEle.checked = "checked";
        choose("selected");
    }
    function choose(status) {
        for (var i = 0; i < chooseSingleEles.length; i++) {
            chooseSingleEles[i].checked = status;
        }
    }
 
    function clickChooseReverse() {
        for (var i = 0; i < chooseSingleEles.length; i++) {
            if (chooseSingleEles[i].checked) {
                chooseSingleEles[i].checked = "";
            } else {
                chooseSingleEles[i].checked = "checked";
            }
        }
    }
 
</script>
</html>
